<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
    <title>首页</title>
    <style>
        #china-map {
            width: 1000px;
            height: 1000px;
            margin: auto auto -150px;
        }
    </style>
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
    <link rel="stylesheet" href="https://unpkg.com/semantic-ui@2.4.2/dist/semantic.min.css">
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
    <script type="text/javascript" src="../static/js/map/china.js" th:src="@{/js/map/china.js}"></script>
    <!--    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>-->
</head>

<body>
<!--导航-->
<nav class="ui inverted attached segment m-padded-tb-mini">
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item">Social Rescue Forces Sys.</h2>
            <a href="index.html" th:href="@{/}" class="active m-item item m-mobile-hide"><i class="home icon"></i>首页</a>
            <a href="repo.html" th:href="@{/repo}" class="m-item item m-mobile-hide"><i class="book icon"></i>仓库</a>
            <a href="upload.html" th:href="@{/upload}" class="m-item item m-mobile-hide"><i class="upload icon"></i>信息上报</a>
            <a href="news.html" th:href="@{/news}" class="m-item item m-mobile-hide"><i
                    class="newspaper outline icon"></i>News</a>
            <div class="right m-item item m-mobile-hide">
                <form name="search" action="#" method="post" th:action="@{/search}" target="_blank">
                    <div class="ui icon inverted transparent input">
                        <input type="text" name="query" placeholder="输入关键字进行查找..." th:value="${query}">
                        <i onclick="document.forms['search'].submit()" class="search icon link"></i>
                    </div>
                </form>
            </div>
            <a th:href="@{/admin}" class="m-item item m-mobile-hide"><i class="user md icon"></i></a>
        </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>
<!--中间信息-->
<div>
    <div style="text-align:center;clear:both;">
        <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
        <script src="/follow.js" type="text/javascript"></script>
    </div>
    <br>
    <div id="china-map"></div>
    <input type="hidden" th:value="${provinceForceCount}" id="provinceForceCount">
    <input type="hidden" th:each="force : ${provinceForceCount}" id="ForceCount">
    <script th:inline="javascript">
        var seriesData = [];
    </script>
    <div style="display: none">
        <tr th:each="force : ${provinceForceCount}">
            <td th:text="${force.name}" id="name"></td>
            <td th:text="${force.value}" id="value"></td>
            <script th:inline="javascript">
                var obj = {};
                obj.name = [[${force.name}]];
                obj.value = [[${force.value}]];
                seriesData.push(obj);
            </script>
        </tr>
    </div>


</div>
<!--底部-->
<footer class="ui inverted vertical segment m-padded-tb-big" >
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="../static/images/wechat.jpg" th:src="@{/images/wechat.jpg}"
                             class="ui rounded image" alt="" style="width: 110px">
                    </div>
                </div>
            </div>
            <div class="two wide column">
                <h4 class="ui inverted header">Skills</h4>
                <div class="skill-container">
                    <div class="ui two column stackable grid">
                        <div class="column">
                            <div class="ui inverted link list">
                                <a href="#" th:href="@{/detail-skill/1}" target="_blank" class="item">火灾</a>
                                <a href="#" th:href="@{/detail-skill/2}" class="item">地震</a>
                                <a href="#" th:href="@{/detail-skill/3}" class="item">暴风雨</a>
                            </div>
                        </div>
                        <div class="column">
                            <div class="ui inverted link list">
                                <a href="#" th:href="@{/detail-skill/4}" target="_blank" class="item">泥石流</a>
                                <a href="#" th:href="@{/detail-skill/5}" class="item">海啸</a>
                                <a href="#" th:href="@{/detail-skill/6}" class="item">雷震</a>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
            <div class="four wide column">
                <h4 class="ui inverted header">Contact me</h4>
                <div class="ui divider"></div>
                <div class="ui inverted link list">
                    <a href="#" class="item">WeChat 18131605102</a>
                    <a href="#" class="item">Email 2194510807@qq.com</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header">Link</h4>
                <div class="ui small images">
                    <a href="https://www.mem.gov.cn/" class="ui image">
                        <img src="../static/images/guojia.png" th:src="@{/images/guojia.png}">
                    </a>
                    <a href="http://eeh.emerinfo.cn/dist/#/home" class="ui image">
                        <img src="../static/images/yingji.png" th:src="@{/images/yingji.png}">
                    </a>
                    <a href="http://120.39.net/" class="ui image">
                        <img src="../static/images/39.png" th:src="@{/images/39.png}">
                    </a>
                    <a href="https://www.beijing120.com/" class="ui image">
                        <img src="../static/images/beijing120.png" th:src="@{/images/beijing120.png}">
                    </a>
                    <a href="http://yjt.shandong.gov.cn/" class="ui image">
                        <img src="../static/images/shandong.png" th:src="@{/images/shandong.png}">
                    </a>
                    <a href="http://yjglj.beijing.gov.cn/" class="ui image">
                        <img src="../static/images/beijing.png" th:src="@{/images/beijing.png}">
                    </a>
                </div>
            </div>
        </div>
        <div class="ui inverted section divider"></div>
        <p class="m-text-spaced m-opacity-mini">Copyright &copy; 2022 Khan Designed by Liushun</p>
    </div>

</footer>
<script src="https://unpkg.com/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script th:inline="javascript">


    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });
</script>
<script>
    var myChart = echarts.init(document.getElementById('china-map'));
    var provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门'];

    console.log(seriesData);

    initEcharts("china", "中国");

    // 初始化echarts
    function initEcharts(pName, Chinese_) {
        var tmpSeriesData = pName === "china" ? seriesData : [];

        var option = {
            title: {
                text: Chinese_ || pName,
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}<br/>{c} (个)'
            },
            series: [
                {
                    name: Chinese_ || pName,
                    type: 'map',
                    mapType: pName,
                    roam: false,//是否开启鼠标缩放和平移漫游
                    data: tmpSeriesData,
                    top: "3%",//组件距离容器的距离
                    zoom: 1,
                    selectedMode: 'single',

                    label: {
                        normal: {
                            show: true,//显示省份标签
                            textStyle: {color: "#fbfdfe"}//省份标签字体颜色
                        },
                        emphasis: {//对应的鼠标悬浮效果
                            show: true,
                            textStyle: {color: "#323232"}
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderWidth: .5,//区域边框宽度
                            borderColor: '#0550c3',//区域边框颜色
                            areaColor: "#4ea397",//区域颜色

                        },

                        emphasis: {
                            borderWidth: .5,
                            borderColor: '#4b0082',
                            areaColor: "#ece39e",
                        }
                    },
                }
            ]

        };

        myChart.setOption(option);

        myChart.off("click");
    }

</script>
</body>
</html>